<template>
  <div class="wrapper">
    <main>
      <el-form :model="userInfo" :rules="rules" ref="userInfo">
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user-solid"
            placeholder="placeholder enter username"
            v-model="userInfo.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-user"
            type="password"
            placeholder="placeholder enter password"
            v-model="userInfo.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            style="width: 100%"
            @click="login('userInfo')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>
<script>
import { login } from "@/api/api";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      userInfo: {
        username: "admin",
        password: "admin",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.setHeight();
    window.addEventListener("resize", this.setHeight);
  },
  methods: {
    setHeight() {
      let html = document.documentElement || document.body;
      document.querySelector(".wrapper").style.height = html.clientHeight + "px";
      document.querySelector(".wrapper").style.background = "#0088dd";
    },

    // 登录验证
    login(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
            // 登录接口
          const { data: res } = await login(this.userInfo);
          //   console.log(res);
          if (res.status !== 0) return this.$message.error(res.msg);
        //   提示信息
          this.$message.success(res.msg);
          sessionStorage.setItem('user','admin')
        // 跳转首页
        this.$router.push('/dashboard')
        } else {
          this.$message.error("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  width: 30%;
  height: 250px;
  border: 1px solid #eee;
  padding: 20px 30px 0px 30px;
  background: #fff;
  box-shadow: 0px 0px 10px #fff;
}
.el-input {
  margin: 10px 0;
}
</style>